<template>
  <div>
    <nut-navbar @click-back="onClick">
      <template #content>
        <div>消息</div>
      </template>
      <template #right>
        <div>
          <Add></Add>发现群聊
        </div>
      </template>
    </nut-navbar>
  </div>
  <div>
    <nut-row>
      <nut-col :span="8">
        <div class="content">赞和收藏</div>
      </nut-col>
      <nut-col :span="8">
        <div class="content light">新增关注</div>
      </nut-col>
      <nut-col :span="8">
        <div class="content light">评论和@</div>
      </nut-col>
    </nut-row>
    <nut-row>
      <nut-col :span="24">
        <div class="content">span:24</div>
      </nut-col>
    </nut-row>
    <nut-row>
      <nut-col :span="24">
        <div class="content">span:24</div>
      </nut-col>
    </nut-row>
    <nut-row>
      <nut-col :span="24">
        <div class="content">span:24</div>
      </nut-col>
    </nut-row>
    <nut-row>
      <nut-col :span="24">
        <div class="content">span:24</div>
      </nut-col>
    </nut-row>
    <nut-navbar @click-back="onClick">
      <template #left>
        <div>发现好友<Ask></Ask></div>
      </template>
      <template #right>
        <div>
          关闭
        </div>
      </template>
    </nut-navbar>
    <nut-row>
      <nut-col :span="24">
        <div class="content">span:24</div>
      </nut-col>
    </nut-row>
    <nut-row>
      <nut-col :span="24">
        <div class="content">span:24</div>
      </nut-col>
    </nut-row>
    <nut-row>
      <nut-col :span="24">
        <div class="content">span:24</div>
      </nut-col>
    </nut-row>
  </div>
</template>

<script setup>
import { Add,Ask } from '@nutui/icons-vue'
const onClick = () => {
  console.log('[Navbar]: on click back')
}
</script>

<style></style>